// V 1.0.1 -- 2024-09-18 12:10:16
// 等待漏斗 ( 不能正常显示出来 )
//
// V 1.0.0 -- 2024-09-13 12:47:52
// 
const view_Root =
{
    template: 
`<div v-loading.fullscreen.lock="mIsFullscreenLoading">
    <el-collapse v-model="mActiveName" v-if="mMain_IsVisible">
        <el-collapse-item name="1" title="1. 条码格式">
            <el-form label-width="120px">
                <el-form-item label="条码格式">
                    <el-select v-model="mBarcodeType_sym" placeholder="请选择条码格式">
                        <el-option
                            v-for="item in mBarcodeTypeArr"
                            :key="item.sym"
                            :label="item.desc"
                            :value="item.sym">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="条码比例 (Scale)">
                    <el-input-number v-model="mScale" :min="1" :max="20" @change="render(mQueue.items[mIndex])"></el-input-number>
                </el-form-item>
                <el-form-item label="显示条码内容">
                    <el-checkbox v-model="mShowContentText">显示</el-checkbox>
                </el-form-item>
                <el-form-item label="调整横向">                    
                    <el-slider show-input :step="1" v-model="mMarginLeft" :min="mMarginLeft_Min" :max="mMarginLeft_Max" :show-tooltip="false" style="width: 100%"></el-slider>
                </el-form-item>
                <el-form-item label="调整纵向">                    
                    <el-slider show-input :step="1" v-model="mMarginTop" :min="mMarginTop_Min" :max="mMarginTop_Max" :show-tooltip="false" style="width: 100%"></el-slider>
                </el-form-item>
            </el-form>
        </el-collapse-item>
        <el-collapse-item name="2" title="2. 接收信息日志">
            <el-table
                ref="myTable"
                :data="mQueue.items"
                :height="mTable_Height"
                style=""
                highlight-current-row
                @cell-click="table_cell_clickHandler">
                <el-table-column
                    prop="Number"
                    label="序号"
                    width="60">
                </el-table-column>
                <el-table-column
                    prop="Content"
                    label="内容">
                </el-table-column>
            </el-table>
        </el-collapse-item>        
        <el-collapse-item name="3" title="3. 条码服务器">
            <el-form label-width="82px">
                <el-form-item label="服务器地址">
                    <el-input v-model="mAddress"></el-input>
                </el-form-item>
                <el-form-item label="端口">
                    <el-input v-model="mPort"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        icon="el-icon-plus"
                        :disabled="!mTcpClient_IsEnabled"
                        @click="btnTcpClient_Open_OnClick">
                        Open
                    </el-button>
                    <el-button
                        type="danger"
                        icon="el-icon-minus"
                        :disabled="mTcpClient_IsEnabled"
                        @click="btnTcpClient_Stop_OnClick">
                        Close
                    </el-button>
                </el-form-item>

                <el-form-item>
                    <div>当前 TcpClient_HashMapKey: {{mTcpClient_HashMapKey}}</div>
                </el-form-item>
            </el-form label-width="82px">
        </el-collapse-item>
    </el-collapse>

    <div style="display: flex; flex-wrap: nowrap; align-items: center; margin-top: 10px; margin-bottom: 10px;">
        <el-button icon="el-icon-view" circle @click="mMain_IsVisible = !mMain_IsVisible"></el-button>        
        <div style="width: 130px; margin-left: auto; margin-right: auto;"></div>
        <div v-if="mScreenKeepOn_IsVisible">
            <el-tag
                v-if="mScreenKeepOn_Checkbox_Disable" 
                type="danger">{{mScreenKeepOn_Checkbox_DisableReason}}</el-tag>

            <el-divider 
                v-if="mScreenKeepOn_Checkbox_Disable"
                direction="vertical" ></el-divider>

            <el-checkbox 
                :disabled="mScreenKeepOn_Checkbox_Disable"
                v-model="mScreenKeepOn"
                @change="screenKeepOn_OnChanged">屏幕常亮</el-checkbox>
        </div>
    </div>
    <canvas ref="myCanvas" :style="canvasStyle"></canvas>
</div>`,
    data: function ()
    {
        return {

            mIsFullscreenLoading: false,

            mMain_IsVisible: true,

            mActiveName: ['3'],

            mTable_Height: 300,
            mQueue: new Queue(10), // 只显示最近 X 条记录
            
            mScale: 2,
           

            mIndex: 0,
                      
            mMarginLeft_Min: 0,
            mMarginLeft_Max: 0,
            mMarginLeft: 0,

            mMarginTop_Min: 0,
            mMarginTop_Max: 0,
            mMarginTop: 0,

            
            mBarcodeTypeArr: [    
            {
                sym: "qrcode",
                desc: "QR Code",
                text: "http://goo.gl/0bis",
                opts: "eclevel=M"
            },
            {
                sym: "ean13",
                desc: "EAN-13",
                text: "9520123456788",
                opts: "includetext guardwhitespace"
            },
            {
                sym: "code128",
                desc: "Code 128",
                text: "Count01234567!",
                opts: "includetext"
            },
            {
                sym: "code39",
                desc: "Code 39",
                text: "THIS IS CODE 39",
                opts: "includetext includecheck includecheckintext"
            },
            {
                sym: "code93",
                desc: "Code 93",
                text: "THIS IS CODE 93",
                opts: "includetext includecheck"
            },
            {
                sym: "datamatrix",
                desc: "Data Matrix",
                text: "This is Data Matrix!",
                opts: ""
            }],
            mBarcodeType_sym: "qrcode",
            mBarcodeType: null,

            mShowContentText: false,




            //#region 屏幕常亮

            mScreenKeepOn_IsVisible: true,
            mScreenKeepOn_Checkbox_Disable: true,
            mScreenKeepOn_Checkbox_DisableReason: "找不到 $device 对象",
            mScreenKeepOn: false,
            
            //#endregion


            mAddress: "192.168.1.121",
            mPort: "48001",            
            mData: "Test Tcp Client",            
            mTcpClient: null,
        };
    },
    mounted: function() {
        this.mMarginLeft_Min = Math.floor(-window.innerWidth);
        this.mMarginLeft_Max = window.innerWidth;

        this.mMarginTop_Min = -110;
        this.mMarginTop_Max = window.innerHeight;

        //#region 屏幕常亮
        try
        {
            this.mScreenKeepOn = ( this.getScreenKeepOn() === "true"? true : false );
            this.Permission_Check();
        }
        catch(e)
        {
            this.mScreenKeepOn_IsVisible = false;
        }
        //#endregion

        EventBus.$on('TcpClient_OnReceive', this.TcpClient_Handler);
    },
    computed: {
        canvasStyle() {
            let style = {
                "margin-left": `${this.mMarginLeft}px`,
                "margin-top": `${this.mMarginTop}px`
            };
            return style;
        },
        mTcpClient_IsEnabled() {
            const r = this.mTcpClient == null ? true : false;
            return r;
        },
        mTcpClient_HashMapKey() {
            return this.mTcpClient?.mTcpClient_HashMapKey;
        }
    },
    methods: {

        TcpClient_Handler: function(data) {
            this.drawBarcode(data);
        },
    
        table_cell_clickHandler: function() {
            const data = arguments[0];
            if(data) 
                this.mIndex = data.Index; // 用户选中列表, 更改当前 mIndex 为 用户选中的项
            
            this.render(data);
        },

        drawBarcode: function() {
            let content = arguments[0];

            var data = 
            {
                Index : this.mIndex,
                Number : this.mIndex + 1,
                Content : content
            };

            this.mQueue.enqueue(data);
            
            this.render(data);
            
            this.$nextTick(()=>{
                if(!this.mMain_IsVisible) // 主菜单不显示时, 无需执行选中项的方法
                    return;

                this.setCurrent(data);
                this.scrollTable2Obj(this.mIndex);
            });            

            this.mIndex = this.mIndex + 1;
        },

        render: function() {
            try 
            {
                let a0 = arguments[0];
                
                let opts = {};
                
                opts.bcid = this.mBarcodeType_sym;
                opts.text = a0.Content;
                if(this.mShowContentText)
                {
                    opts.alttext = a0.Content;
                }
                opts.scaleX = this.mScale;
                opts.scaleY = this.mScale;

                const canvas = this.$refs.myCanvas;
                bwipjs.toCanvas(canvas, opts);
            } 
            catch(e) 
            {
                console.error(e);
            }
        },

        setCurrent: function(row) {
            this.$refs.myTable.setCurrentRow(row);
        },

        scrollTable2Obj: function (index) {
            // 滚动到当前位置
            const wrapper = this.$refs.myTable.bodyWrapper;
            const rows = wrapper.children[0].rows;
            if (rows[index]) {
                wrapper.scrollTop = rows[index].offsetTop;
            }
        },

        //#region 屏幕常亮

        //#region 权限列表

        Permission_Check: function() {
            const jsonStr = $device.Screen_CheckPermissions();
            const m = JSON.parse(jsonStr);
            if(!m.IsSuccess) 
            {
                return;
            }
            this.mPermissionArr = JSON.parse(m.Data);
            this.Permission_Check_WAKE_LOCK();
        },

        requestPermission: function() {
            $device.Permission_Request(arguments[0]);
        },
        
        Permission_Check_WAKE_LOCK: function() {
            const jsonStr = $device.Permission_Check("android.permission.WAKE_LOCK");
            const m = JSON.parse(jsonStr);
            if(!m.IsSuccess) 
            {
                this.mScreenKeepOn_Checkbox_Disable = true;
                this.mScreenKeepOn_Checkbox_DisableReason = m.ExceptionInfo;
                return;
            }

            this.mScreenKeepOn_Checkbox_Disable = false;
        },

        //#endregion
        
        getScreenKeepOn: function() {
            return $device.Screen_GetScreenKeepOn();
        },

        screenKeepOn_OnChanged: function() 
        {
            const v = arguments[0];
            const checked = arguments[1];
            const jsonStr = $device.Screen_SetScreenKeepOn(v);
            const m = JSON.parse(jsonStr);

            if(!m.IsSuccess) 
            {
                // 在下一个DOM更新周期之前执行, 阻止 checked 值的修改
                this.$nextTick(() => {
                    this.mScreenKeepOn = !checked;
                });

                this.$notify({
                    type: "error",
                    title: "捕获异常",
                    message: `${m.ExceptionInfo}`,
                    position: 'bottom-left',
                });
            }
        },

        //#endregion

        //#region 服务器

        btnTcpClient_Open_OnClick: function () {
            let args = {
                Address: this.mAddress,
                Port: parseInt(this.mPort),
                Content: this.mData
            };
            
            this.mIsFullscreenLoading = true;
            let jsonStr = $device.TcpClient_Start(JSON.stringify(args));
            const result = JSON.parse(jsonStr);
            if(!result.IsSuccess)
            {
                this.$notify({
                    type: "error",
                    title: "捕获异常",
                    message: `${result.ExceptionInfo}`,
                    position: 'bottom-left',
                });

                this.mIsFullscreenLoading = false;
                return;
            }
            let obj = JSON.parse(result.Data);
            this.mTcpClient = obj;

            this.mIsFullscreenLoading = false;
            return;
        },

        btnTcpClient_Stop_OnClick: function() {           
            let jsonStr = $device.TcpClient_Stop(JSON.stringify(this.mTcpClient));
            const result = JSON.parse(jsonStr);
            if(!result.IsSuccess) 
            {
                return;
            }
            this.mTcpClient = null;
        },

        //#endregion
    }
};